 <template>
  <div class="banner">
    <swiper :options="swiperOptions" ref="swiper" v-if="swiperSlides.length>1">
        <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
          <div
            class="banner-word"
            data-swiper-parallax="-2500"
            data-swiper-parallax-duration="3000"
          >
            <a href="#">
              <h3 class="ban-title">{{ slide.title }}</h3>
              <p class="ban-cont">{{ slide.content }}</p>
            </a>
          </div>
          <img :src="slide.img" />
        </swiper-slide>
        <div class="swiper-pagination-bullet" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
// import api from "../../api";
export default {
  data() {
    return {
      swiperOptions: {
        speed: 900,
        autoplay: true, //自动轮播
        loop: true, // 循环模式选项
        parallax:true, //开启时差
        pagination: {
          //分页器
          el: ".swiper-pagination",
        }
      },
     

      swiperSlides: [
        {
          title: "我在爱尔兰",
          content:
            "爱尔兰（爱尔兰语：Poblacht na hÉireann；英语：Republic of Ireland）, 是一个西欧的议会共和制国家，西临大西洋，东靠爱尔兰海，与英国隔海相望，是北美通向欧洲的通道爱尔兰自然",
          img: require("../../static/indexImg/banner1.jpg"),
        },
        {
          title: "一个人的东京",
          content:
            "东京(Tokyo)是日本国的首都，是亚洲第一大城市，世界第二大城市。全球最大的经济中心之一。东京的著名观光景点有东京铁塔、皇居、国会议事堂、浅草寺、浜离宫、上野公园与动物园",
          img: require("../../static/indexImg/banner2.jpg"),
        },
        {
          title: "普罗旺斯的梦",
          content:
            "普罗旺斯(Provence)位于法国东南部，毗邻地中海和意大利，从地中海沿岸延伸到内陆的丘陵地区，中间有大河“Rhone”流过。自古就以靓丽的阳光和蔚蓝的天空，迷人的地中海和心醉",
         img: require("../../static/indexImg/banner3.jpg"),
        },
        {
          title: "相约夏威夷之夏",
          content:
            "夏威夷州位于北太平洋中，距离美国本土3,700公里，总面积16,633平方公里，属于太平洋沿岸地区。首府为檀香山。在1778至1898年间，夏威夷也被称为“三明治群岛”(Sandwich Islands)",
          img: require("../../static/indexImg/banner_02.png"),
        },
      ],
      
    };
  },
  // components:{
  //   swiper:VueAwesomeSwiper.swiper,
  //           swiperSlide:VueAwesomeSwiper.swiperSlide
  // },
  mounted() {
    // api.getBanner().then((res) => {
    //   console.log(res.data);
    //   this.swiperSlides = res.data.banner;
    // });
  },
  computed: {
    swiper() {
      //拿到swiperde dom元素
      return this.$refs.mySwiper.$swiper;
    },
  },
};
</script>

<style scopde>
.banner img {
  width: 100%;
  height: 500px;
}
.banner .swiper-slide {
  position: relative;
}
.banner .box {
  position: absolute;
  width: 400px;
  height: 160px;
  padding: 30px 40px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  top: 140px;
  left: 100px;
}
.box h3 {
  text-align: center;
  font-size: 22px;
}
.box .info {
  font-size: 14px;
  line-height: 30px;
  letter-spacing: 1px;
  text-indent: 2em;
}
/* 轮播点 */
.swiper-pagination-bullet {
  width: 20px;
  height: 20px;
}
.swiper-pagination-bullet-active {
  background: green;
}
.swiper-container .banner-word {
  position: absolute;
  top: 142px;
  left: 212px;
  width: 574px;
  height: 182px;
  padding: 24px 15px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.swiper-container .banner-word a {
  color: #fff;
}
.swiper-container .banner-word a h3 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 21px;
  font-weight: 700;
}
.swiper-container .banner-word a p {
  font-size: 14px;
  line-height: 30px;
  text-indent: 2em;
  letter-spacing: 1px;
}
</style>